<template>
	<view :style="navStyle">
		<view class="y-navbar" :style="{ height: CustomBar + 'px', background: bgColor }">
			<view class="status" :style="{ height: StatusBar + 'px' }"></view>
			<view class="content">
				<slot name="append">
					<view class="tn-custom-nav-bar__back"
						:style="{ width: menuButtonInfo.width + 'px', height: menuButtonInfo.height + 'px' }">
						<view class="icon" @click="handBack">
							<text class="wyc wyc-31fanhui1"></text>
						</view>
						<view class="icon" @click="handHome">
							<text class="wyc wyc-shouye-shouye"></text>
						</view>
					</view>
				</slot>

				<view class="title" :style="{ color: titleColor }">
					<slot name="title">
						{{ title }}
					</slot>
				</view>
				<view :style="{ width: menuButtonInfo.width + 'px' }">

				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		computed
	} from 'vue'
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		backUrl: {
			type: String,
			default: ''
		},
		isFixed: {
			type: Boolean,
			default: true
		},
		bgColor: {
			type: String,
			default: '#fff'
		},
		titleColor: {
			type: String,
			default: '#000'
		}
	})

	const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	const system = uni.getSystemInfoSync()
	const StatusBar = system.statusBarHeight
	let custom = wx.getMenuButtonBoundingClientRect();
	let CustomBar = custom.bottom + custom.top - system.statusBarHeight;

	const navStyle = computed(() => {
		let style = ''
		if (props.isFixed) {
			style = `height:${CustomBar}px;`
		}
		return style
	})

	const handBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}

	const handHome = () => {
		uni.switchTab({
			url: '/pages/tabbar/home/index'
		})
	}
</script>

<style lang="scss" scoped>
	.y-navbar {
		display: flex;
		flex-direction: column;
		position: fixed;
		z-index: 15;
		width: 750rpx;
		top: 0;
		transition: all 0.2s;
		overflow: hidden;
		// box-shadow: 5rpx 0 8rpx rgba(0, 0, 0, 0.4);

		.content {
			flex: 1;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			/* 胶囊*/
			.tn-custom-nav-bar__back {
				width: 240rpx;
				height: 100%;
				position: relative;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				box-sizing: border-box;
				background-color: rgba(0, 0, 0, 0.15);
				border-radius: 1000rpx;
				border: 1rpx solid rgba(255, 255, 255, 0.5);
				color: #FFFFFF;
				font-size: 18px;

				.icon {
					display: block;
					flex: 1;
					margin: auto;
					text-align: center;
				}

				&:before {
					content: " ";
					width: 1rpx;
					height: 110%;
					position: absolute;
					top: 22.5%;
					left: 0;
					right: 0;
					margin: auto;
					transform: scale(0.5);
					transform-origin: 0 0;
					pointer-events: none;
					box-sizing: border-box;
					opacity: 0.7;
					background-color: #FFFFFF;
				}
			}

			.title {
				flex: 1;
				text-align: center;
				font-weight: bold;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2D3341;
				transition: all 0.3s;
			}
		}
	}
</style>